<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { ElMessage, type ComponentSize } from 'element-plus'
import { deleteCommodity, pauseCommodity, queryStoreByUid } from '../assets/net/NetUtils';
import { userInfoStore } from '../assets/userStore/userStore';
import { CommodityModel } from '../assets/model/Commodity';
import { SoldOut, Delete } from '@element-plus/icons-vue'

const size = ref<ComponentSize>('default')
const userStore = userInfoStore()
let commodities = ref<Array<CommodityModel>>();
let isEmpty = ref(true)
onMounted(() => {
    queryStoreByUid(userStore.uid)
        .then((value) => {
            if (value.data.length === 0) {
                isEmpty.value = true;
            } else {
                isEmpty.value = false;
                commodities.value = value.data[0].commodities
            }
        })
})

const deleteC = (gid: number) => {
    deleteCommodity(gid)
        .then((value) => {
            if (value.code === 200) {
                ElMessage.success(value.data);
                queryStoreByUid(userStore.uid)
                    .then((value) => {
                        if (value.data.length === 0) {
                            isEmpty.value = true;
                        } else {
                            isEmpty.value = false;
                            commodities.value = value.data[0].commodities
                        }
                    })
            } else {
                ElMessage.error(value.data);
            }
        })
}

const pauseC = (gid: number) => {
    pauseCommodity(gid)
        .then((value) => {
            if (value.code === 200) {
                ElMessage.success(value.data);
            } else {
                ElMessage.error(value.data);
            }
        })
}
</script>

<template>
    <el-scrollbar height="100%" style="overflow-y: hidden;">
        <el-empty v-show="isEmpty" style="width: 100%;height: 100%;" description="你还没有店铺哦～" />
        <el-space wrap :size="size" v-show="!isEmpty">
            <div v-for="item in commodities" :key="item.gid">
                <el-card shadow="hover" style="width: 250px;height: auto;border-radius: 15px;">
                    <el-row align="middle" justify="center">
                        <el-col :span="24">
                            <el-image :src="`/api/image/${item.image?.url}`" style="width: 100%;height: 200px;"
                                fit="contain" />
                        </el-col>
                        <el-col :span="24" align="start">
                            <el-text style="font-size: larger;" line-clamp="1">{{ item.commodityName }}</el-text>
                        </el-col>
                        <el-col :span="24" align="start">
                            <el-text style="color: gray;height: 60px;" line-clamp="3">{{ item.description }}</el-text>
                        </el-col>
                        <el-col :span="24" align="end">
                            <el-text style="color: red;font-size: larger;">¥ {{ item.price }}</el-text>
                        </el-col>
                        <el-col :span="24" style="margin-top: 5%;">
                            <el-row style="width: 100%;">
                                <el-col :span="24" align="start">
                                    <el-text>浏览量：{{ item.browse }}</el-text>
                                    <el-text style="margin-left: 10%;">评分：{{ item.point }}</el-text>
                                </el-col>
                            </el-row>
                        </el-col>
                        <el-col :span="24" style="margin-top: 10%;">
                            <el-row style="width: 100%;">
                                <el-col :span="24" align="end">
                                    <el-button plain @click="pauseC(item.gid!)">
                                        <el-icon color="grey">
                                            <SoldOut />
                                        </el-icon>
                                    </el-button>
                                    <el-button type="danger" plain @click="deleteC(item.gid!)">
                                        <el-icon color="red">
                                            <Delete />
                                        </el-icon>
                                    </el-button>
                                </el-col>
                            </el-row>
                        </el-col>
                    </el-row>
                </el-card>
            </div>
        </el-space>
    </el-scrollbar>
</template>